<template>
  <div class="main">
    <div class="container">
    <!-- 轮播图页面 -->
    <div class="swiper">
      <div class="block text-center" m="t-4">
    <div class="demonstration"></div>
    <el-carousel trigger="click" height="550px">
      <el-carousel-item  v-for="item in 4" :key="item">
        <img src="./images/dance.jpg" width="1200" height="500">
      </el-carousel-item>
    </el-carousel>
  </div>

    </div>
    <!-- 中间导航 -->
    <div class="navigate container">
      <ul class="title">
        <li><RouterLink to="/home/recommend">推荐</RouterLink></li>
        <li><RouterLink to="/home/production">作品</RouterLink></li>
        <li><RouterLink to="/home/teach">教程</RouterLink></li>
        <li><RouterLink to="/home/specialtopic">专题</RouterLink></li>
        <li><RouterLink to="/home/information">动态</RouterLink></li>
        <li><RouterLink to="/home/attention">关注</RouterLink></li>
       <li><a href="javascript:;">感兴趣技能</a></li>
      </ul>
    </div>
  </div>
  <!-- 路由界面 -->
  <div class="wrapperBox">
      <RouterView></RouterView>
  </div>

  </div>
</template>

<script setup lang='ts'>
  import { onMounted, ref, reactive } from 'vue';
  import "./css/index.less"

  const access_token=ref('c494ae44-3adc-48ca-8749-5128a53358d7')
  const position=ref('pc_mainpage')
</script>

<style lang="less" scoped>
  


</style>
